<script lang="ts">
	import { Any } from '$lib/api/proto/google/protobuf/any';
	import type { NodeInfo } from '$lib/api/proto/roadmap_data_api';
	import { InterviewSkillData } from '$lib/api/proto/roadmap_data_type_api';
	import SimpleEditor from '$lib/components/editor/SimpleEditor.svelte';
	import { appStore } from '$lib/stores/app.svelte';
	import { userStore } from '$lib/stores/user.svelte';
	import { callApi } from '$lib/utils/call_utils';
	import { roadmapStore } from '../store.svelte';
	import EditorJS from '@editorjs/editorjs';

	interface Props {
		node?: NodeInfo;
	}

	const props: Props = $props();

	// svelte-ignore non_reactive_update
	let oldContent = undefined as string | undefined;
	let editor: EditorJS | null = $state(null);

	if (props.node != undefined && props.node.content != undefined) {
		const nodeContent = Any.unpack(props.node.content, InterviewSkillData);
		oldContent = nodeContent.content;
	}

	function closeModal() {
		roadmapStore.targetNodeType = null;
		roadmapStore.targetDropPosition = null;
		roadmapStore.editNodeType = null;
		roadmapStore.editNode = null;
	}

	async function createNode() {
		if (
			roadmapStore.targetDropPosition == null ||
			userStore.userSession == null ||
			editor == null
		) {
			return;
		}

		const contentData = await editor.save();
		if (contentData.blocks.length == 0) {
			appStore.addToastMessage({
				level: 'warning',
				content: '面试技巧内容不能为空',
				keepTime: 2000
			});
			return;
		}
		const res = await callApi(
			appStore.roadmapDataApiClient.addNode({
				sessionId: userStore.userSession,
				roadmapId: roadmapStore.roadmapId,
				x: roadmapStore.targetDropPosition.x,
				y: roadmapStore.targetDropPosition.y,
				w: 300,
				h: 200,
				content: Any.pack(
					{
						content: JSON.stringify(contentData)
					},
					InterviewSkillData
				)
			}).response
		);
		roadmapStore.onUpdateNode(res.nodeId);
		appStore.addToastMessage({
			level: 'success',
			content: '创建面试技巧节点成功',
			keepTime: 2000
		});
		closeModal();
	}

	async function updateNode() {
		if (
			props.node == null ||
			userStore.userSession == null ||
			editor == null
		) {
			return;
		}

		const contentData = await editor.save();
		if (contentData.blocks.length == 0) {
			appStore.addToastMessage({
				level: 'warning',
				content: '面试技巧内容不能为空',
				keepTime: 2000
			});
			return;
		}

		await callApi(
			appStore.roadmapDataApiClient.updateNodeData({
				sessionId: userStore.userSession,
				roadmapId: roadmapStore.roadmapId,
				nodeId: props.node.nodeId,
				content: Any.pack(
					{
						content: JSON.stringify(contentData)
					},
					InterviewSkillData
				)
			}).response
		);

		roadmapStore.onUpdateNode(props.node.nodeId);
		appStore.addToastMessage({
			level: 'success',
			content: '修改职位节点成功',
			keepTime: 2000
		});
		closeModal();
	}
</script>

<dialog class="modal modal-open">
	<div class="modal-box w-[800px] max-w-none">
		<button
			class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
			onclick={() => closeModal()}>✕</button
		>
		<h3 class="text-lg font-bold">
			{props.node == undefined ? '创建面试技巧节点' : '修改面试技巧节点'}
		</h3>
		<div class="max-h-[60vh] overflow-y-auto pr-[10px] flex-col space-y-4 pt-[20px]">
			<SimpleEditor
				sizeClass="min-h-[500px] border-2 border-base-200 max-h-[500px]"
				data={oldContent}
				placeholder="请输入面试技巧"
				onInit={(tmpEditor) => (editor = tmpEditor)}
			/>
		</div>

		<div class="modal-action">
			<button class="btn" onclick={() => closeModal()}>取消</button>
			<button
				class="btn btn-primary"
				onclick={() => {
					if (props.node == undefined) {
						createNode();
					} else {
						updateNode();
					}
				}}>{props.node == undefined ? '创建' : '修改'}</button
			>
		</div>
	</div>
	<div class="modal-backdrop">
		<button onclick={() => closeModal()}>close</button>
	</div>
</dialog>
